<template>
    <div>

        <h1>修改卡卷</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>卡卷编号</td>
                    <td>{{ data.id }}</td>
                </tr>
                <tr>
                    <td>卡卷名称</td>
                    <td>
                        <input type="text" v-model="data.name">
                    </td>
                </tr>
                <tr>
                    <td>卡卷类型</td>
                    <td>
                        <select v-model="data.cardTypeid">
             <option value="0">请选择卡卷类型</option>
             <option v-for="e in cardxlk" :value="e.id">{{ e.cardTypeName }}</option>
          </select>
                    </td>
                </tr>
                <tr>
                    <td>适用范围(门店)</td>
                    <td>
                        <select v-model="data.shopnameid">
             <option value="0">请选择门店</option>
             <option v-for="e in shopxlk" :value="e.id">{{ e.shopName }}</option>
          </select>
                    </td>
                </tr>
                <tr>
                    <td>适用日期</td>
                    <td>
                        <span v-for="e in hh">
                            <input type="checkbox" v-model="h" :value="e">{{ e }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>有效期</td>
                    <td>
                        <input type="text" v-model="data.yxdate">
                    </td>
                </tr>
                <tr>
                    <td>价格</td>
                    <td>
                        <input type="text" v-model="data.price">
                    </td>
                </tr>
                <tr>
                    <td>排序</td>
                    <td>
                        <input type="text" v-model="data.px">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                       <select v-model="data.stateid">
             <option value="0">请选择状态</option>
             <option v-for="e in statexlk" :value="e.id">{{ e.stateName }}</option>
          </select> 
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="imgcard">
                        <img :src="'https://localhost:7161/'+data.imgUrl" style="height: 60px; width: 60px;">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="修改" @click="upda">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();


onMounted(()=>{
    getid();
    ShopX();
    cardX();
    stateX(); 
})
//上传
const imgcard=(e:any)=>{
  var f=e.target.files[0];
  var fs=new FormData();
  fs.append("file",f);
  debugger

  if(f.size>1024*1024)
  {
     alert("图片大小不能超过1MB")
     return;
  }
   if(f.type!="image/jpeg" && f.type!="image/png" && f.type!="image/GIF")
  {
     alert("图片格式只能为JPEG、PNG、GIF")
     return;
  }
  axios.post("/api/Img",fs).then(res=>{
    data.value.imgUrl=res.data
  })
}

//适用日期
const hh=ref(["周一","周二","周三","周四","节假日"])
const h=ref([])

//反填
const getid=()=>{
    var vid= route.query.id

    axios.get("/api/Card/Getid",{params:{id:vid}}).then(res=>{
        data.value=res.data
        h.value=data.value.syDate.split(",")
    })

}

//修改
const upda=()=>{
       data.value.syDate=h.value.toString();
    axios.put("/api/Card/UpdateCard",data.value).then(res=>{
        if(res.data>0)
    {
        alert("修改成功");
router.push({path:"/"})
    }
    else{
        alert("修改失败");
        return;
    }
    })
}

const data =ref({
    "id": 0,
  "name": "",
  "cardTypeid": 0,
  "shopnameid": 0,
  "syDate": "",
  "yxdate": "",
  "price": 0,
  "px": 0,
  "stateid": 0,
  "imgUrl": "",
  "isDelete": true
})

//门店下拉框
const shopxlk=ref([{
    "id": 1,
    "shopName": "昌平店"
}])
const ShopX=()=>{
    axios.get("/api/Shop").then(res=>{
        shopxlk.value=res.data
    })
}
//卡卷下拉框
const cardxlk=ref([{
    "id": 1,
    "cardTypeName": "限时卡"
}])
const cardX=()=>{
    axios.get("/api/Type").then(res=>{
        cardxlk.value=res.data
    })
}
//状态下拉框
const statexlk=ref([{
    "id": 1,
    "stateName": "上架"
}])
const stateX=()=>{
    axios.get("/api/State").then(res=>{
        statexlk.value=res.data
    })
}




</script>

<style scoped>

</style>